<template>
  <div>
    <Header>
      <van-icon name="arrow-left" size="22" slot="left" />
      <span slot="center">地址管理</span>
    </Header>
    <div class="location_body">
      <van-empty description="快递小哥找不到你，留个地址呗~" v-if="addressList.length === 0">
      </van-empty>
      <div class="location_list" v-if="addressList.length !== 0">
        <van-swipe-cell v-for="(item, index) in addressList" :key="index">
          <div class="location_list_item">
            <p>{{ item.name }}&nbsp;&nbsp;{{ item.tel }}<span class="default" v-if="item.isDefault">默认</span></p>
            <van-row>
              <van-col :span="22">{{ item.address }}</van-col>
              <van-col>
                <van-icon name="edit" size="20" @click="goEdit(item.id)" />
              </van-col>
            </van-row>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="goDelete(item.id)" />
          </template>
        </van-swipe-cell>
      </div>
      <button @click="goAddAddress" class="add_button">添加地址</button>
    </div>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { getAllAddressRequest, deleteAddressRequest } from '@/network/api/address'
export default {
  name: 'all_locations',
  data() {
    return {
      chosenAddressId: 1,
      addressList: []
    }
  },
  components: {
    Header
  },
  methods: {
    goAddAddress() {
      this.$router.push({
        name: 'add',
        query: {
          userId: this.$store.state.user.userId
        }
      })
    },
    addressParse(address) {
      const arr = []
      address.forEach(item => {
        item.address = item.province === item.city ? item.province + item.county + item.addressDetail : item.province + item.city + item.county + item.addressDetail
        item.isDefault = item.isDefault_int === 1 ? true : false
        arr.push({
          id: item.id,
          name: item.name,
          tel: item.tel,
          address: item.address,
          isDefault: item.isDefault
        })
      })
      this.addressList = arr
    },
    async goDelete(id) {
      await deleteAddressRequest(id)
      const res = await getAllAddressRequest(this.$store.state.user.userId)
      this.addressParse(res)
    },
    goEdit(id) {
      this.$router.push({
        name: 'edit',
        query: {
          id
        }
      })
    }
  },
  async created() {
    const res = await getAllAddressRequest(this.$store.state.user.userId)
    this.addressParse(res)
  },
}
</script>

<style lang='less' scoped>
.location_body {
  font-size: 14px;

  .location_list {
    color: #323233;
    margin-top: 12px;

    .location_list_item {
      box-sizing: border-box;
      width: 95%;
      padding: 15px;
      margin: 0 auto 8px;
      background-color: #fff;
      border-radius: 10px;
    }

    .delete-button {
      height: 100%;
    }

    .default {
      color: #fff;
      padding: 4px 8px;
      background-color: #b0352f;
      font-size: 10px;
      border-radius: 10px;
      margin-left: 8px;
    }

    p {
      font-size: 16px;
      margin: 0;
      margin-bottom: 5px;
    }

    .van-row {
      font-size: 13px;
    }
  }

  .add_button {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    background: #b0352f;
    color: #fff;
    text-align: center;
    padding: 12px 0;
    border: none;
    border-radius: 8px;
  }
}
</style>